<template>
  <el-menu
      :default-active="activeMenu"
      router
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
  >
    <el-submenu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>系统管理</span>
      </template>
      <el-menu-item index="/users">用户管理</el-menu-item>
      <el-menu-item index="/roles">角色管理</el-menu-item>
    </el-submenu>

    <el-menu-item index="/dashboard">
      <el-icon><menu /></el-icon>
      <span>仪表盘</span>
    </el-menu-item>

    <el-menu-item index="/research/projects">
      <el-icon><document /></el-icon>
      <span>科研项目</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import {
  Location,
  Menu,
  Document
} from '@element-plus/icons-vue'

defineProps({
  activeMenu: {
    type: String,
    required: true
  }
})
</script>

<style scoped>
.el-menu {
  border-right: none;
}
</style>